<script setup>
import {DataLine,Sell,SoldOut,Goods,Box,User,Tickets} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {useTokenStore} from "@/stores/token.js";

const router = useRouter();
const tokenStore = useTokenStore();
const role = tokenStore.role
</script>

<template>

    <el-menu class="menu" :default-openeds="['2','3','4','5','6','7']">
      <el-scrollbar>
      <el-menu-item index="1" @click="router.push('/')">
        <template #title>
          <el-icon><DataLine /></el-icon>仪表板
        </template>
      </el-menu-item>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><Sell /></el-icon>采购管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1" @click="router.push('/purchaseOrderList')">采购订单</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

      <el-sub-menu index="3">
        <template #title>
          <el-icon><SoldOut /></el-icon>销售管理
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1" @click="router.push('/saleOrderList')">销售订单</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="4">
        <template #title>
          <el-icon><Goods /></el-icon>商品管理
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1" @click="router.push('/material')">商品信息</el-menu-item>
          <el-menu-item index="4-2" @click="router.push('/materialCategory')">商品分类</el-menu-item>
          <el-menu-item index="4-3" @click="router.push('/materialUnit')">商品品牌</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

        <el-sub-menu index="5">
          <template #title>
            <el-icon><Box /></el-icon>商品库存
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1" @click="router.push('/inventoryList')">商品库存</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

      <el-sub-menu index="6">
        <template #title>
          <el-icon><Tickets /></el-icon>基础信息管理
        </template>
        <el-menu-item-group>
          <el-menu-item index="6-1" @click="router.push('/storeList')">仓库信息</el-menu-item>
          <el-menu-item index="6-2" @click="router.push('/customerList')">客户信息</el-menu-item>
          <el-menu-item index="6-3" @click="router.push('/vendorList')">供应商信息</el-menu-item>

        </el-menu-item-group>
      </el-sub-menu>

        <el-sub-menu v-if="role === 1" index="7">
          <template #title>
            <el-icon><User /></el-icon>用户管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="7-1" @click="router.push('/userList')">用户信息</el-menu-item>

          </el-menu-item-group>
        </el-sub-menu>

      </el-scrollbar>
    </el-menu>

</template>

<style scoped>
  /* 解决滑动栏空白问题 */
  /* 侧边栏菜单 */
  .menu {
    height: 100%; /* 菜单高度填充父容器 */
    overflow-y: auto; /* 允许滚动 */
  }

</style>